<template>
  <view class="gallery_effect" >
    <view class="gallery-van-tab-a">
      <view class="gallery-van-tab-aa gallery-van-tab-aa-block" v-for="item in effectList" :key="item.index" style=" margin-left: 10px;" >
 <image src="https://img.yzcdn.cn/vant/cat.jpeg" fit="cover" style="width: 160px; height: 149px;" @click="showOverlay(item.galleryInfoId)"></image>        <view class="gallery-van-tab-a-content">
          <view>
            <view align="left" style="font-size: 0.8rem;margin: 0;padding: 0.2rem 0">{{item.galleryInfoTitle}}</view>
          </view>
          <view align="left" class="gallery-van-tab-b-contents">
            <view class="van-tab-b-contents">
                <image round  src="https://img.yzcdn.cn/vant/cat.jpeg" style="position: absolute; width: 20px; height: 20px; border-radius: 50px;"/>
              <text style="font-size: 0.4rem;margin-left: 1.5rem">{{item.shopsName}}</text>
            </view>
            <view class="van-tab-b-contents">
              <van-icon name="like-o" style="position: absolute"/>
              <text class="block-list-likes" style="font-size: 0.8rem;margin-left: 1.2rem">{{item.galleryInfoFabulous}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <van-overlay :show="show" @click="show = false">
      <view class="wrapper" @click.stop>
        <view class="block-text">
          <view class="block-text-share" align="right" style="padding: 0.5rem">
            <van-icon name="share-o" color="#ffffff"/>
          </view>
          <view class="block-text-img">
            <image src="https://img.yzcdn.cn/vant/cat.jpeg" fit="cover" style="width: 100%;" @click="show = true"></van-image>
          </view>
          <view class="block-text-content" align="left">
            <view class="block-text-content-p">
              <view>{{this.effect.galleryInfoText}}</view>
              <view @click="toText()">查看原文 ></view>
            </view>
            <view class="block-text-content-cen">
              <van-row text="8">
                <van-col text="14">
                  <van-field v-model="value" placeholder="添加评论......" @keyup.enter="insertComment" class="block-text-content-cen-input"/>
                </van-col>
                <van-col text="8"  style="margin-right: 20px;">
                  <van-row>
                    <van-col text="8"  style="margin-right: 10px;">
                      <view align="center" style="padding-top: 0.3rem">
                        <view><van-icon name="like-o" color="#ffffff" size="16"/></view>
                        <view style="font-size: 1rem">{{this.effect.galleryInfoFabulous}}</view>
                      </view>
                    </van-col>
                    <van-col text="8"  style="margin-right: 10px;">
                      <view align="center" style="padding-top: 0.3rem">
                        <view><van-icon name="star-o" color="#ffffff" size="16"/></view>
                        <view style="font-size: 1rem">{{this.effect.galleryInfoCollection}}</view>
                      </view>
                    </van-col>
                    <van-col text="8"  style="margin-right: 10px;">
                      <view align="center" style="padding-top: 0.3rem" @click="showPopup">
                        <view><van-icon name="chat-o" color="#ffffff" size="16"/></view>
                        <view style="font-size: 1rem">{{this.effect.galleryInfoReply}}</view>
                      </view>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </view>
          </view>
		  
		  
		  

          <van-popup v-model="showP" closeable position="bottom" :style="{ height: '60%' }">
            <view class="block-share">
              <view class="block-share-top">
                <view>全部评论{{this.galleryComment.length}}条</view>
              </view>
              <view class="block-share-list">
                <view class="block-share-list-demo" v-for="comment in galleryComment" :key="comment.index">
                  <img src="https://img.yzcdn.cn/vant/logo.png">
                  <view class="list-demo-content">
                    <view>
                      <h3>{{comment.customerInfo.customerName}}</h3>
                      <view>{{comment.galleryCommentTime}}</view>
                    </view>
                    <view style="width: 70%;font-size: 0.7rem">{{comment.galleryCommentText}}</view>
                  </view>
                  <view class="block-share-list-like">
                    <van-icon name="like-o"/>
                    <text class="block-share-list-likes" style="font-size: 0.8rem">{{comment.galleryCommentFabulous}}</text>
                  </view>
                </view>
              </view>
              <view class="block-share-bottom">
                <van-cell-group>
                  <van-field v-model="commentText" clearable label="" left-icon="edit" placeholder="评论一下~" center style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem" @keyup.enter="addComment" @click-left-icon="addComment"/>
                </van-cell-group>
              </view>
            </view>
          </van-popup>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>

  import {
    selectGalleryList,
    selectGalleryById,
    selectGalleryComment,
    insertGalleryComment
  } from "@/api/gallery/gallery.js";
  import {Toast} from "vant";

    export default {
      name: "gallery_effect",
      inject:['reload'],
      data(){
        return{
          show: false,
          effectList:[],
          value: '',
          showP: false,
          effect: Object,
          galleryId: '',
          galleryComment:[],
          commentText: '',
        }
      },
      created() {
        this.getGalleryList();
      },
      methods: {
        getGalleryList(){
          selectGalleryList("1").then((res) => {
            this.effectList = res.data.data;
          });
        },
        showOverlay(galleryInfoId){
			console.log("123456 我是弹框")
          this.show = true;
          selectGalleryById(galleryInfoId).then((res) => {
            this.galleryId = res.data.data.galleryInfoId;
            this.effect = res.data.data.galleryInfo;
          });
        },
        showPopup() {
          this.showP = true;
          selectGalleryComment(this.galleryId).then((res) => {
            this.galleryComment = res.data.data;
          });
        },
        toText(){
         uni.navigateTo({
         	url:"/pages/original_text/original_text?galleryInfoId="+this.galleryId
         })
        },
        /** 添加评论 */
        addComment(){
          insertGalleryComment(this.galleryId,this.commentText).then((res) =>{
            if(res.code == 500){
              Toast("评论失败");
            }else{
              Toast("评论成功");
              this.reload();
            }
          })
        },
        insertComment(){
          insertGalleryComment(this.galleryId,this.value).then((res) =>{
            if(res.code == 500){
              Toast("评论失败");
            }else{
              Toast("评论成功");
              this.reload();
            }
          })
        }
      }
    }
</script>

<style scoped>
  .gallery-van-tab-aa{
    padding-bottom: 0.5rem;
  }
  .gallery-van-tab-b-contents{
    position: relative;
  }
  .van-tab-b-contents{
    display :inline-block;
  }
  .gallery-van-tab-aa-block{
    display: inline-block;
    width: 44%;
    position: relative;
    padding : 0.5rem
  }

  .block-text-img{
    margin-top: 10rem;
  }
  .block-text-content-cen-input{
    border-radius: 5rem;
    width: 10rem;
  }
  .block-text-content{
    color: white;
    font-size: 0.6rem;
    padding: 1rem;
    position: absolute;
    width: 100%;
    bottom: 5%;
  }
  .block-text-content-p p{
    padding: 0.3rem 0;
  }

  .block-share {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
    text-align: left;
  }

  .block-share .block-share-top{
    padding-left: 1rem;
    font-weight: 700;
  }

  .block-share .block-share-bottom{
    width: 85%;
    position: fixed;
    bottom: 0rem;
    padding: 0.7rem;
    background-color: white;
  }

  .block-share .block-share-list{
    padding: 1rem 1.5rem;
  }

  .block-share .block-share-list .block-share-list-demo{
    padding: 1rem 0;
    position: relative;
  }

  .block-share .block-share-list .block-share-list-demo{
    margin-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo{
    padding-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo .block-share-list-demos img{
    width: 1rem;
    height: 1rem;
  }

  .block-share .block-share-list .block-share-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block-share .block-share-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block-share .block-share-list .list-demo-content view{
    padding-bottom: 0.5rem;
  }
  .block-share .block-share-list .list-demo-content view h3{
    font-size: 0.75rem;
  }
  .block-share .block-share-list .list-demo-content view p{
    font-size: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-like{
    display: inline-block;
  }
</style>
